<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item prop="date">
					<el-date-picker
						v-model="filters.date"
						range-separator="至"
						type="datetimerange"
						placeholder="选择时间范围">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.keyword" placeholder="输入店铺名称查找"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.status" clearable placeholder="状态">
						<el-option label="营业中" value="2"></el-option>
						<el-option label="已关闭" value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="addSelfShop">新增自营店</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<!--<el-input prop="balance" type="hidden"></el-input>
			<el-input prop="points" type="hidden"></el-input>
			<el-input prop="canWithdrawBalance" type="hidden"></el-input>
			<el-input prop="rebateBalance" type="hidden"></el-input>-->
			<el-table-column type="expand">
				<template slot-scope="scope">
					<div>
						<span>商家图片：</span>
						<img v-for="item,index in scope.row.pics" :key="index" :src="item" width="60" height="60" align="center" style="margin-right: 10px;" />
					</div>
					<div style="margin-top: 20px;">
						<span>商家资质：</span>
						<img v-for="item,index in scope.row.aptitudeImage" :key="index" :src="item" width="60" height="60" align="center" style="margin-right: 10px;" />
					</div>
				</template>
			</el-table-column>
			<el-table-column type="index" label="序号" width="65" align="center">
			</el-table-column>
			<el-table-column prop="name" label="商家名称" align="center">
			</el-table-column>
			<!--<el-table-column prop="pics" label="商家图片" align="center">
				<template scope="scope">
					<img v-for="item in scope.row.pics" :src="item" width="40" height="40" align="center" />
				</template>
			</el-table-column>-->
			<el-table-column label="商家简介" align="center">
				<template slot-scope="scope">
					<el-popover trigger="hover" placement="top">
						<p style="width: 150px;line-height: 1.5;">{{ scope.row.introduce }}</p>
						<div slot="reference" class="name-wrapper">
							<p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ scope.row.introduce }}</p>
						</div>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column prop="typeStr" label="商家类型" align="center">
			</el-table-column>
			<el-table-column prop="statusStr" label="状态" align="center" :formatter="formatShopStatus">
			</el-table-column>
			<el-table-column prop="phone" label="电话" align="center">
			</el-table-column>
			<el-table-column prop="address" label="地址" align="center">
			</el-table-column>
			<el-table-column prop="openTime" label="营业时间" align="center">
			</el-table-column>
			<!--<el-table-column prop="aptitudeImage" label="营业资质" align="center">
				<template scope="scope">
					<img v-for="item in scope.row.aptitudeImage" :src="item" width="40" height="40" align="center" />
				</template>
            </el-table-column>-->
			<el-table-column prop="createTime" label="创建时间" min-width="120" align="center" :formatter="formatDateTime">
			</el-table-column>
			<el-table-column label="操作" align="center" min-width="140">
				<template slot-scope="scope">
					<el-button size="small" type="primary" @click="editSelfShop(scope.$index, scope.row)">编辑</el-button>
					<el-button size="small" v-if="scope.row.statusStr != 4" @click="closeSelfShop(scope.$index, scope.row)">关闭</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<div class="toolbar" style="display: flex;justify-content: flex-end;">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>

		<!--新增界面-->
		<el-dialog title="新增自营店" v-model="addSelfShopFormVisible">
			<el-form :model="addSelfShopForm" label-width="80px" :rules="addSelfShopFormRules" ref="addSelfShopForm">
				<el-form-item label="所属门店" prop="name">
					<el-select v-model="addSelfShopForm.name" clearable placeholder="所属门店">
						<el-option v-for="item,index in roles" :label="item.name" :value="item.name" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商家图片">
					<el-upload ref="pics1" class="upload-demo" action="/file/upload"
					           name="file"
					           :data="fileType1"
					           :on-success="onSuccess1"
					           :on-error="onError1"
					           multiple
					           list-type="picture-card"
					           :file-list="fileList1"
					>
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">最多添加5张，首张为封面图</div>
					</el-upload>
				</el-form-item>

				<el-form-item label="商家简介" prop="introduce">
					<el-input type="textarea" placeholder="输入商家简介" v-model="addSelfShopForm.introduce" :maxlength="100"></el-input>
				</el-form-item>
				<el-form-item label="商家类型" prop="typeId">
					<el-select v-model="addSelfShopForm.typeId" clearable placeholder="请选择商家类型">
						<el-option
							v-for="item,index in typeList"
							:label="item.name"
							:value="item.id"
							:key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商家电话" prop="phone">
					<el-input v-model="addSelfShopForm.phone" placeholder="输入商家电话" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="商家地址" prop="address">
					<el-select v-model="addSelfShopForm.provinceId" clearable placeholder="省" @change="addPChange">
						<el-option
							v-for="item,index in pList"
							:label="item.name"
							:value="item.id"
							:key="index">
						</el-option>
					</el-select>
					<el-select v-model="addSelfShopForm.cityId" clearable placeholder="市" @change="addCChange">
						<el-option
							v-for="item,index in cList"
							:label="item.name"
							:value="item.id"
							:key="index">
						</el-option>
					</el-select>
					<el-select v-model="addSelfShopForm.regionId" clearable placeholder="区" @change="addRChange">
						<el-option
							v-for="item,index in rList"
							:label="item.name"
							:value="item.id"
							:key="index">
						</el-option>
					</el-select>
					<el-input v-model="addSelfShopForm.address" placeholder="详细地址" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="营业时间" >
					<el-time-picker placeholder="开始时间" v-model="addSelfShopForm.start_time" ></el-time-picker>
					~
					<el-time-picker placeholder="结束时间" v-model="addSelfShopForm.end_time" ></el-time-picker>
				</el-form-item>
				<el-form-item label="商铺经纬度">
					<a href="http://lbs.amap.com/console/show/picker" target="_blank">点击跳转获取经纬度</a>
					<el-input v-model="addSelfShopForm.grid"></el-input>
				</el-form-item>
				<el-form-item label="商家资质">
					<el-upload class="upload-demo" action="/file/upload"
					           name="file"
					           :data="fileType2"
					           :on-success="onSuccess2"
					           :on-error="onError2"
					           multiple
					           list-type="picture-card"
					           :file-list="fileList2"
					>
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addSelfShopFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">立即新增</el-button>
			</div>
		</el-dialog>

		<!--编辑界面-->
		<el-dialog title="编辑自营店" v-model="editSelfShopFormVisible" @close="editorClose">
			<el-form :model="editSelfShopForm" label-width="80px" :rules="editSelfShopFormRules" ref="editSelfShopForm">
				<el-form-item label="商家名称" prop="name">
					<el-select v-model="editSelfShopForm.name" clearable placeholder="所属门店">
						<el-option v-for="item,index in roles" :label="item.name" :value="item.id" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商家图片">
					<div v-for="item,index in this.tempPics" :key="index" style="float:left;position:relative;" @click="delPics(item)">
						<img :src="item" width="150" height="150" align="center" />
					</div>
					<el-upload class="upload-demo" action="/file/upload"
					           name="file"
					           :data="fileType3"
					           :on-success="onSuccess3"
					           :on-error="onError3"
					           multiple
					           list-type="picture-card"
					           :file-list="fileList3"
					           :on-remove="handleRemove1"
					>
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">最多添加5张，首张为封面图</div>
					</el-upload>
				</el-form-item>

				<el-form-item label="商家简介" prop="introduce">
					<el-input type="textarea" placeholder="输入商家简介" v-model="editSelfShopForm.introduce" :maxlength="100"></el-input>
				</el-form-item>
				<el-form-item label="商家类型" prop="typeId">
					<el-select v-model="editSelfShopForm.typeId" clearable :placeholder="editSelfShopForm.typeStr">
						<el-option
							v-for="item,index in typeList"
							:label="item.name"
							:value="item.id"
							:key="index">
						</el-option>
						&lt;!&ndash; <el-option label="类型1" value="1">
					</el-option> &ndash;&gt;
					</el-select>
				</el-form-item>
				<el-form-item label="商家电话" prop="phone">
					<el-input v-model="editSelfShopForm.phone" placeholder="输入商家电话" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="商家地址" prop="address">
					<el-select v-model="editSelfShopForm.provinceId" clearable :placeholder="editSelfShopForm.provinceStr" @change="pChange">
						<el-option
							v-for="item,index in pList"
							:label="item.name"
							:value="item.id"
							:key="index">
						</el-option>
					</el-select>
					<el-select v-model="editSelfShopForm.cityId" clearable :placeholder="editSelfShopForm.cityStr" @change="cChange">
						<el-option
							v-for="item,index in cList"
							:label="item.name"
							:value="item.id"
							:key="index">
						</el-option>
					</el-select>
					<el-select v-model="editSelfShopForm.regionId" clearable :placeholder="editSelfShopForm.regionStr" @change="rChange">
						<el-option
							v-for="item,index in rList"
							:label="item.name"
							:value="item.id"
							:key="index">
						</el-option>
					</el-select>
					<el-input v-model="editSelfShopForm.address" placeholder="输入详细地址" auto-complete="off"></el-input>


				</el-form-item>
				<el-form-item label="营业时间">
					<el-time-picker placeholder="开始时间" v-model="editSelfShopForm.startTime" format="HH:mm:ss"></el-time-picker>
					~
					<el-time-picker  placeholder="结束时间" v-model="editSelfShopForm.endTime"></el-time-picker>
				</el-form-item>

				<el-form-item label="商铺经纬度">
					<a href="http://lbs.amap.com/console/show/picker" target="_blank">点击跳转获取经纬度</a>
					<el-input v-model="editSelfShopForm.grid"></el-input>
				</el-form-item>
				<el-form-item label="商家资质">
					<div v-for="item in this.tempAptitudeImg" style="float:left;position:relative;" @click="delAptitudeImg(item)">
						<img :src="item" width="150" height="150" align="center" />
					</div>
					<el-upload class="upload-demo" action="/file/upload"
					           name="file"
					           :data="fileType4"
					           :on-success="onSuccess4"
					           :on-error="onError4"
					           multiple
					           list-type="picture-card"
					           :file-list="fileList4"
					           :on-remove="handleRemove2"
					>
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editSelfShopFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import { getRoleList, getSelfShopList, addSelfShop, updateSelfShop,shopTypeList ,closeSelfShop,getAreaList} from '@/api/api';

	export default {
		data() {
			return {
				filters: {
					status: '',
					date: '',
					keyword: '',
				},
				start: '',
				end: '',

				activeName: 'up_level',
				selected: "",
				pList:[],//省列表
				cList:[],//市列表
				rList:[],//区列表
				positions: [],
				typeList:[],
				users: [],
				total: 0,
				currentPage: 1,
				size: 10,
				listLoading: false,
				addLoading: false,
				sels: [],//列表选中列
				currentUserId: 0,

				addSelfShopFormVisible: false,//新增用户界面是否显示
				addSelfShopFormLoading: false,
				addSelfShopFormRules: {
					introduce : [
						{ required: true, message: '请输入商家简介', trigger: 'blur' },
					],
					phone : [
						{ required: true, message: '请输入商家电话', trigger: 'blur' },
					],
					address : [
						{ required: true, message: '请输入商家地址', trigger: 'blur' },
					]
				},
				//新增用户界面数据
				addSelfShopForm: {
					name: "",
					pics: [],
					introduce: "",
					typeId: '',
					phone: "",
					provinceId: "",
					cityId: "",
					regionId: "",
					address: "",
					start_time: "",
					end_time: "",
					grid: '',
					aptitudeImages: []
				},
				roles: [],
				editSelfShopFormVisible: false,//新增用户界面是否显示
				editSelfShopFormLoading: false,
				editSelfShopFormRules: {
					introduce : [
						{ required: true, message: '请输入商家简介', trigger: 'blur' },
					],
					phone : [
						{ required: true, message: '请输入商家电话', trigger: 'blur' },
					],
					address : [
						{ required: true, message: '请输入商家地址', trigger: 'blur' },
					]
				},
				//编辑用户界面数据
				editSelfShopForm: {
					id:'',
					name: "",
					picss: [],
					introduce: "",
					typeId: '',
					phone: "",
					provinceId: "",
					cityId: "",
					regionId: "",
					address: "",
					startTime: "",
					endTime: "",
					aptitudeImagess: [],
					grid: ''
				},
				fileType1:{
					"fileType" : "SUMMARY_EVENT"
				},
				fileList1: [],
				fileType2:{
					"fileType" : "SUMMARY_EVENT"
				},
				fileList2: [],
				fileType3:{
					"fileType" : "SUMMARY_EVENT"
				},
				fileList3: [],
				fileType4:{
					"fileType" : "SUMMARY_EVENT"
				},
				fileList4: [],
				tempPics:[],
				tempAptitudeImg:[],
				tempPID:0,//省ID
				tempCID:0,//市ID
				tempRID:0,//区ID
				tempTID:0,//商家类型
			}
		},
		methods: {
			getTime() { // 时间处理
				let starttime,endtime = ''
				let time = this.filters.date;
				if(!time[0] == '') {
					starttime = this.moment(time[0]).format('YYYY-MM-DD HH:mm:ss')
				}
				if(!time[1] == '') {
					endtime = this.moment(time[1]).format('YYYY-MM-DD HH:mm:ss');
				}
				if(starttime == "Invalid date"){
					starttime="";
				};
				if(endtime == "Invalid date"){
					endtime="";
				};
				this.start = starttime
				this.end = endtime
			},
			//获取角色类型列表
			getRoles() {
				let para = {};
				getRoleList(para).then((res) => {
					this.roles = res.data.data;
			});
			},
			//类别显示转换
			formatShopStatus: function (row, column){
				return row.statusStr == 1 ? '审核中' : row.statusStr == 2 ? '营业中' : row.statusStr == 3 ? '不通过' : row.statusStr == 4 ? '已关闭': '未知';
			},
			formatDateTime: function (row, column){
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
			changeToDateStr:function(date){
				return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
			changeToTimeStr:function(date){
				return this.moment(date).format("HH:mm:ss");
			},
			//获取自营店铺列表
			getUsersList() {
				let para = {
					pageIndex: this.currentPage,
					pageSize: this.size,
				}
				getSelfShopList(para).then(res => {
					this.users = res.data.data
				this.users.map((v,i) => {
					this.roles.map((val,index) => {
					if(v.name == val.id) {
					v.name = val.name
				}
			})
			})
				this.total =  res.data.totalCount
			})
			},
			// 分页详情
			handleSizeChange(val) {
				this.size = val;
				this.getUsersList();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getUsersList();
			},
			// 搜索
			search() {
				this.getTime()
				let para = {
					pageIndex: this.currentPage,
					pageSize: this.size,
				};
				if(!this.start == '') {
					para.startTime = this.start
				}
				if(!this.end == '') {
					para.endTime = this.end
				}
				if(!this.filters.keyword.replace(/\s/g, "") == '') {
					para.name = this.filters.keyword
				}
				if(!this.filters.status == '') {
					para.status = this.filters.status
				}
				getSelfShopList(para).then((res) => {
					this.users = res.data.data;
				this.total =  res.data.totalCount
			});
			},

			//获取商家分类列表
			getTypeList() {
				let para = {
					pageIndex: 1,
					pageSize: 100,
					startTime: null,
					endTime: null,
				};
				shopTypeList(para).then((res) => {
					if (res.code == 0) {
					this.typeList = res.data.data;
				}
			});
			},

			//获取地址
			getArea(type,id){
				let para = {
					pageIndex: 1,
					pageSize: 10000,
					type: type,
					parentId: id,
				};
				console.log(para);
				getAreaList(para).then((res) => {
					console.log(res);
				if (res.code == 0) {
					if (type == 1) {
						this.pList = res.data;
					}else if (type == 2){
						this.cList = res.data;
					}else if (type == 3){
						this.rList = res.data;
					}
				}

			});
			},
			//切换商户类型
			typeChange: function (){
				console.log("切换商户类型");
			},
			//切换省
			pChange: function(){
				console.log("切换省"+this.editSelfShopForm.provinceId);
				this.getArea(2,this.editSelfShopForm.provinceId);
				console.log(this.cList);
				// this.editSelfShopForm.cityId = null;
				// this.editSelfShopForm.regionId = null;
				// this.getArea(3,this.cList[0].id);
			},
			//切换市
			cChange: function(){
				console.log("切换市"+this.editSelfShopForm.cityId);
				this.getArea(3,this.editSelfShopForm.cityId);
				// this.editSelfShopForm.regionId = null;
			},
			//切换区
			rChange: function(){
				console.log("切换区"+this.editSelfShopForm.regionId);
			},
			//切换省
			addPChange: function(){
				console.log("切换省"+this.addSelfShopForm.provinceId);
				this.getArea(2,this.addSelfShopForm.provinceId);
				console.log(this.cList);
				// this.addSelfShopForm.cityId = null;
				// this.addSelfShopForm.regionId = null;
				// this.getArea(3,this.cList[0].id);
			},
			//切换市
			addCChange: function(){
				console.log("切换市"+this.addSelfShopForm.cityId);
				this.getArea(3,this.addSelfShopForm.cityId);
				// this.addSelfShopForm.regionId = null;
			},
			//切换区
			addRChange: function(){
				console.log("切换区"+this.addSelfShopForm.regionId);
			},
			//新增用户界面
			addSelfShop: function () {
				this.addSelfShopFormVisible = true;
			},
			//显示级别设置界面
			levelSetup: function () {
				this.levelSetupFormVisible = true;
				this.levelSetupForm = Object.assign({}, row);
			},
			//显示编辑界面
			editSelfShop: function (index, row) {
				this.editSelfShopFormVisible = true;
				this.editSelfShopForm =  Object.assign({}, row);
				this.tempPics = [...row.pics];
				this.tempAptitudeImg = [...row.aptitudeImage];
				this.roles.map((v,i) => {
					if(this.editSelfShopForm.name == v.id) {
					this.editSelfShopForm.name = v.name
				}
			})

				this.editSelfShopForm.grid = row.longitude + ',' + row.latitude
				this.editSelfShopForm.startTime = this.changeToDateStr('2018-01-01'+' '+row.startTime);
				this.editSelfShopForm.endTime = this.changeToDateStr('2018-01-01'+' '+row.endTime);


				this.tempPID = row.provinceId;
				this.tempCID = row.cityId;
				this.tempRID = row.regionId;
				this.tempTID = row.typeId;
				this.editSelfShopForm.provinceId=null;
				this.editSelfShopForm.cityId=null;
				this.editSelfShopForm.regionId=null;
				this.editSelfShopForm.typeId=null;
			},
			//编辑
			editSubmit(){
				this.$refs.editSelfShopForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
						let info = Object.assign({},this.editSelfShopForm);
						console.log(info)
						if (!info.startTime || info.startTime=='') {
							info.startTime = null;
						}else{
							info.startTime  = this.changeToDateStr(info.startTime);
						}
						if (!info.endTime || info.endTime=='') {
							info.endTime = null;
						}else{
							info.endTime  = this.changeToDateStr(info.endTime);
						}

						var curTypeId = 0;
						if (!info.typeId) {
							curTypeId =  this.tempTID;
							if (!this.tempTID) {
								curTypeId = 0;
							};
						}else{
							curTypeId = info.typeId;
						}
						let para = {
							id:info.id,
							name: info.name,
							pics: info.pics,
							introduce: info.introduce,
							typeId: curTypeId,
							phone: info.phone,
							provinceId: !info.provinceId?this.tempPID:info.provinceId,
							cityId: !info.cityId?this.tempCID:info.cityId,
							regionId: !info.regionId?this.tempRID:info.regionId,
							address: info.address,
							start_time: info.startTime,
							end_time: info.endTime,
							aptitudeImages: info.aptitudeImages
						};
						this.roles.map((v,i) => {
							if(info.name == v.name) {
							para.roleId = v.id
						}
					})

						para.longitude = this.editSelfShopForm.grid.split(',')[0]
						para.latitude = this.editSelfShopForm.grid.split(',')[1]
						para.pics = [...this.editSelfShopForm.picss,...this.tempPics]
						para.aptitudeImages = [...this.editSelfShopForm.aptitudeImagess,...this.tempAptitudeImg]
						updateSelfShop(para).then((res) => {
							this.addLoading = false;
						if(res.code == 0) {
							this.$message({
								message: '编辑成功',
								type: 'success'
							});
							this.editSelfShopFormVisible = false;
							this.fileList3 = []
							this.fileList4 = []
							this.getUsersList();
						} else {
							this.$message({
								message: res.message,
								type: 'error'
							});
						}

					});
					});
					}
				});
			},
			editorClose() { // 关闭编辑页面
				this.tempPics = [];
				this.tempAptitudeImg = [];
			},
			//新增
			addSubmit() {
				this.$refs.addSelfShopForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
						let para = Object.assign({}, this.addSelfShopForm);
						this.roles.map((v,i) => {
							if(this.addSelfShopForm.name == v.name) {
							para.roleId = v.id
						}
					})

						para.longitude = this.addSelfShopForm.grid.split(',')[0]
						para.latitude = this.addSelfShopForm.grid.split(',')[1]
						if (!para.start_time || para.start_time=='') {
							para.start_time = null;
						}else{
							para.start_time  = this.changeToDateStr(para.start_time);
						}
						if (!para.end_time || para.end_time=='') {
							para.end_time = null;
						}else{
							para.end_time  = this.changeToDateStr(para.end_time);
						}
						addSelfShop(para).then((res) => {
							this.addLoading = false;
						if(res.code == 0) {
							this.$message({
								message: '添加成功',
								type: 'success'
							});
							this.addSelfShopFormVisible = false;
							this.getUsersList();
						} else {
							this.$message({
								message: res.message,
								type: 'error'
							});
						}

					});
					});
					}
				});
			},

			selsChange: function (sels) {
				this.sels = sels;
				console.log(sels);
			},
			//关闭自营店铺
			closeSelfShop:function(index,row){
				let t = this
				this.$confirm('确认关闭该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
				//NProgress.start();
				let para = { id: row.id };
				closeSelfShop(para).then((res) => {
					this.listLoading = false;
				if(res.code == 0) {
					this.getUsersList()
					this.$message({
						message: '关闭成功',
						type: 'success'
					});
				} else {
					this.$message({
						message: res.message,
						type: 'error'
					});
				}
			});
			}).catch(() => {

				});
			},
			delPics:function(value){
				console.log("删除图片:"+value);
				var index = this.editSelfShopForm.picss.indexOf(value);
				if (index > -1) {
					this.editSelfShopForm.picss.splice(index, 1);
				};

				var tag = this.tempPics.indexOf(value);
				if (tag > -1) {
					this.tempPics.splice(index,1);
				};
			},
			delAptitudeImg:function(value){
				var index = this.editSelfShopForm.aptitudeImagess.indexOf(value);
				if (index > -1) {
					this.editSelfShopForm.aptitudeImagess.splice(index, 1);
				};

				var tag = this.tempAptitudeImg.indexOf(value);
				if (tag > -1) {
					this.tempAptitudeImg.splice(index,1);
				};
			},
			onTabSelected(value) {
				this.selected = value;
			},
			render(h, tabInstance) {
				// h = createElement，上面有講過囉～
				// select = 就是一開始定義的下拉式選單
				return h(select, {
					// 監聽事件 change
					on: {
						change: this.onTabSelected
					}
				});
			},
			onSuccess1(response, file, fileList) {
				this.addSelfShopForm.pics.push(file.response.body);
			},
			onError1(response, file, fileList) {
				this.$message({
					showClose: true,
					message: '图片上传失败！',
					type: 'error'
				});
			},

			onSuccess2(response, file, fileList) {
				this.addSelfShopForm.aptitudeImages.push(file.response.body);
			},
			onError2(response, file, fileList) {
				this.$message({
					showClose: true,
					message: '图片上传失败！',
					type: 'error'
				});
			},


			onSuccess3(response, file, fileList) {
				this.editSelfShopForm.picss.push(file.response.body);
			},
			onError3(response, file, fileList) {
				this.$message({
					showClose: true,
					message: '图片上传失败！',
					type: 'error'
				});
			},
			handleRemove1(file,fileList){
				this.delPics(file.response.body);
			},

			onSuccess4(response, file, fileList) {
				this.editSelfShopForm.aptitudeImagess.push(file.response.body);
			},
			onError4(response, file, fileList) {
				this.$message({
					showClose: true,
					message: '图片上传失败！',
					type: 'error'
				});
			},
			handleRemove2(file,fileList){
				console.log("选择图片："+file.response.body);
				this.delAptitudeImg(file.response.body);
			},

			onSuccessUpdate(response, file, fileList) {
				this.editForm.image = file.response.body;
			},
			onErrorUpdate(response, file, fileList){
				this.$message({
					showClose: true,
					message: '图片上传失败！',
					type: 'error'
				});
			}
		},
		mounted() {
			this.getRoles()
			this.getUsersList();
			this.getTypeList();
			this.getArea(1,0);
		}
	}

</script>

<style lang="scss" scoped>
	.el-row {
		margin-bottom: 0px;
		&:last-child {
			margin-bottom: 0;
		}
	}
	.el-col {
		border-radius: 0px;
	}
	.bg-gray {
		background: #ffffff;
	}
	.bg-gray-light {
		background: #ffffff;
	}
	.grid-title {
		border-radius: 0px;
		min-height: 32px;
		padding-top: 13px;
		font-size:18px;
		font-weight:bold;
	}
	.grid-content {
		border-radius: 0px;
		min-height: 32px;
		text-align:center;
		padding-top: 13px;
	}
	.grid-button {
		border-radius: 0px;
		min-height: 28px;
		text-align:center;
		margin-top:2px;
	}
	.grid-input {
		border-radius: 0px;
		min-height: 28px;
		text-align:center;
		margin-top:2px;
		margin-left:5px;
		margin-right:5px;
	}
	.grid-address {
		text-align: left;
		padding-left:5px;
	}
	.grid-description{
		text-align: left;
		padding-top:10px;
		padding-left:5px;
		text-size:15px;
		text-weight:bold;
		color: red;
	}
</style>
